<template>
	<div class="many-fabric">
		<el-form :model="addFabricForm" :rules="addFabricFormRules" ref="addFabricForm" label-width="120px">
			<el-form-item label="面料图:" class="upload-box" prop="images">
				<div class="goods-img-upload">
					<div class="goods-img-upload-btns">
						<el-upload ref="upload" action="fakeaction" :show-file-list="false" :http-request=" function(res) { return upload(res); } " multiple accept="image/*" > <el-button type="primary" size="small">上传图片</el-button>
						</el-upload>
						<el-button type="danger" size="small" @click="restImg('vice')">重置</el-button>
						<!-- <div class="el-upload__tip">800*800像素<500KB</div> -->
					</div>
					<div class="goods-img-upload-imgs">
						<el-image v-if="!images.length"><div slot="error"></div></el-image>
						<div v-for="(data, index) in images" :key="index" class="vice_big_box" v-else>
							<i class="el-icon-error" @click="delVice(index, 1)"></i>
							<el-image :preview-src-list="images" :src="data" fit="contain"></el-image>
						</div>
					</div>
				</div>
			</el-form-item>
			<el-form-item label="面料型号:" prop="fabric_sn"><el-input v-model="addFabricForm.fabric_sn" placeholder="请输入面料型号" clearable></el-input></el-form-item>
			<el-form-item label="面料分类:" prop="image_class_id">
				<el-select v-model="addFabricForm.image_class_id" clearable>
					<el-option v-for='(data,index) in sortList' :key="index" :label="data.class_name" :value="data.class_id">{{data.class_name}}</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="排序:" prop="sort"><el-input v-model="addFabricForm.sort" placeholder="请输入排序" clearable></el-input></el-form-item>
			<el-form-item label="状态:" prop="status"><el-switch v-model="addFabricForm.status" :active-value="0" :inactive-value="1"></el-switch></el-form-item>
		</el-form>
		<el-button @click="cancel()">取 消</el-button>
		<el-button type="primary" @click="addFabricClick('addFabricForm')">确 定</el-button>
	</div>
</template>

<script>
export default {
	props: {
		layerid: {
			type: String,
			default: ''
		},
		type: {
			type: Number,
			default: 0
		},
		info: Object
	},
	data() {
		return {
			images: [],
			factory_id: localStorage.getItem('factory_id'),
			addFabricForm: {
				fabric_sn: '',
				sort: '',
				status: 0,
				images: '',
				is_factory: 1,
				image_class_id: ''
			}, // 添加面料的信息
			addFabricFormRules: {
				sort: [{ required: true, message: '请输入排序' }],
				images: [{ required: true, message: '请上传面料图片' }],
				image_class_id: [{ required: true, message: '请选择面料分类' }]
			},
			sortList: []
		};
	},
	methods: {
		init() {
			if (this.type == 1) {
				this.addFabricForm = this.info;
				if(this.addFabricForm.image_class_id==0){
					this.addFabricForm.image_class_id = ''
				}
			}
			let id = this.$route.query.id;
			if (id != undefined) {
				this.factory_id = id;
				delete this.addFabricForm.is_factory;
			}else{
				this.factory_id = localStorage.getItem('factory_id')
				id = this.factory_id
			}
			this.$http(this.$ApiList.FactoryImageClassList,{factory_id: id}).then(res => {
				this.sortList = res.datas
			})
		},
		// 图片上传
		upload(params) {
			//console.log(params);
			const file = params.file,
				isJPGPNG = file.type === 'image/jpeg' || 'image/png',
				isLt5MB = file.size / 1024 <= 5024;
			if (!isJPGPNG) {
				this.$message.error('只能上传图片格式png、jpg!');
				return;
			}
			if (!isLt5MB) {
				this.$message.error('图片不能大于5M');
				return;
			}

			let image = new FormData();
			image.append('file[]', file);
			this.$http(this.$ApiList.publicUpload, image).then(res => {
				this.images.push(res.datas[0]);
			});
		},
		// 删除图片
		delVice(index) {
			this.$confirm('删除后不可恢复，是否确认删除?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			})
				.then(() => {
					this.images.splice(index, 1);
				})
				.catch(() => {});
		},
		addFabricClick(formName) {
			if (this.images.length == 0) {
				this.$layer.msg('至少要有一个图片');
				return;
			}
			this.addFabricForm.images = this.images.join(',');
			this.addFabricForm.type = 3;
			this.$refs[formName].validate(valid => {
				if (valid) {
					if (this.type == 0) {
						this.addFabricForm.factory_id = this.factory_id;
						this.$http(this.$ApiList.UpMoreFactoryImage, this.addFabricForm).then(res => {
							this.$layer.msg(res.datas);
							this.$parent.init();
							this.cancel();
						});
					} else {
						let id = this.$route.query.id;
						if (id == undefined) {
							this.addFabricForm.is_factory = 1;
						}
						delete this.addFabricForm.add_time;
						delete this.addFabricForm.update_time;
						delete this.addFabricForm.status_name;
						delete this.addFabricForm.type;
						this.$http(this.$ApiList.UpdateFactoryImage, this.addFabricForm).then(res => {
							this.$layer.msg(res.datas);
							this.$parent.init();
							this.cancel();
						});
					}
				} else {
					this.$layer.msg('请填写完整信息后提交');
				}
			});
		},
		cancel() {
			this.$layer.close(this.layerid);
		}
	},
	created() {
		this.init();
	}
};
</script>
<style lang="scss">
.many-fabric {
	padding: 20px 20px;
	.upload-box {
		padding-left: 40px;
		.goods-img-upload {
			display: flex;
			.goods-img-upload-imgs {
				flex: 1;
				align-items: flex-start;
				.el-image {
					width: 180px;
					height: 140px;
					border: solid 1px #e5e5e5;
					margin-left: 25px;
					vertical-align: top;
				}
			}
			.goods-img-upload-imgs-info {
				width: 100%;
				max-width: 660px;
				border: solid 1px #e5e5e5;
				margin-left: 25px;
				min-height: 390px;
				.goods-img-upload-imgs-info-box {
					position: relative;
					.el-icon-error {
						position: absolute;
						font-size: 20px;
						color: #ef3030;
						right: 5px;
						top: 5px;
						z-index: 1;
						background-color: #fff;
						border-radius: 50%;
						cursor: pointer;
					}
				}
				.el-image {
					width: 100%;
					vertical-align: top;
				}
			}
			.vice_big_box {
				position: relative;
				display: inline-block;
				vertical-align: top;
				margin-bottom: 20px;
				.el-icon-error {
					position: absolute;
					font-size: 20px;
					color: #ef3030;
					right: 5px;
					top: 5px;
					z-index: 1;
					background-color: #fff;
					border-radius: 50%;
					cursor: pointer;
				}
			}
		}
		.el-upload__tip {
			width: 80px;
			text-align: center;
		}
		.el-form-item__label {
			float: none;
		}
		.el-form-item__content {
			margin-left: 0 !important;
			.el-button--danger {
				width: 80px;
				background-color: #37c1d6;
				border-color: #37c1d6;
			}
		}
	}
}
</style>
